<template>
  <div class="banner-carousel">
    <div class="swiper banner-swiper">
      <div class="swiper-wrapper">
        <template v-for="(item, index) in bannerList" :key="index">
          <div class="swiper-slide" style="">
            <img
              :src="
                $getImgUrlFromMediaById(item.featured_image_src.full)
                  ? $getImgUrlFromMediaById(item.featured_image_src.full)
                  : require('@/assets/image/banner-default.png')
              "
              class=""
              style=""
            />
            <!-- <div style="width: 100%; height: 500px"></div> -->
          </div>
        </template>
      </div>
      <!-- <div class="swiper-pagination"></div> -->
      <div class="swiper-button-prev">
        <div class="swiper-button-box">
          <i class="fa fa-angle-left" aria-hidden="true"></i>
        </div>
      </div>
      <div class="swiper-button-next">
        <div class="swiper-button-box">
          <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script setup>
import Swiper, { Navigation, Pagination, Controller, Autoplay } from "swiper";
// Import Swiper styles
import "swiper/css";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({
  bannerList: {
    type: Array,
    required: true,
  },
});

const data = reactive({
  swiperOptions: {
    slidesPerView: 1,
    modules: [Navigation, Pagination, Controller, Autoplay],
    loop: true, //循环播放
    autoplay: { delay: 3000, disableOnInteraction: false },
    speed: 500,
    // centeredSlides: true, //设置slide居中
    spaceBetween: 0,
    navigation: {
      nextEl: ".banner-carousel .swiper-button-next",
      prevEl: ".banner-carousel .swiper-button-prev",
    },
    pagination: {
      el: ".banner-carousel .swiper-pagination",
      bulletClass: "my-bullet",
      bulletActiveClass: "my-bullet-active",
    },
    observer: true,
    observeParents: true,
  },
});
const refData = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {
  // Swiper.use([Navigation, Pagination]); // 使用需要的功能
  const bannerSwiper = new Swiper(".banner-swiper", data.swiperOptions);
});

const methods = {};
</script>
<style lang="scss" scoped>
@media (max-device-width: 768px) {
  .banner-carousel {
    img {
      height: 25vh;
      width: 100%;
    }
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .banner-carousel {
    img {
      height: 60vh;
      width: 100%;
    }
  }
}

@media (min-width: 1200px) {
  .banner-carousel {
    img {
      height: 700px;
      width: 100%;
    }
  }
}

.banner-carousel {
  .container-fluid {
    padding-right: var(--bs-gutter-x, 0);
    padding-left: var(--bs-gutter-x, 0);
  }

  .banner-swiper {
    ::v-deep .swiper-pagination {
      position: absolute;
      bottom: 5%;
      left: 50%;
      z-index: inherit;

      .my-bullet {
        border-radius: 50%;
        margin: 4px;
        background: rgba(255, 255, 255, 0.5);
        width: 1rem;
        height: 0.14rem;
        display: inline-block;
        transition: width 0.3s;
        cursor: pointer;
      }

      .my-bullet-active {
        display: inline-block;
        background-color: #28a7e1;
        width: 1rem;
        height: 0.14rem;
        border-radius: 4px;
      }
    }

    .swiper-button-prev,
    .swiper-button-next {
      color: #fff;
      z-index: inherit;
    }

    .swiper-button-box {
      color: #23282d;
      background: #fff;
      width: 3rem;
      height: 3rem;
      line-height: 3rem;
      border-radius: 100%;
      text-align: center;
      font-size: 1.5rem;
    }

    .swiper-button-prev {
      position: absolute;
      top: 50%;
      left: 15%;
    }

    .swiper-button-next {
      position: absolute;
      top: 50%;
      right: 15%;
    }
  }
}
</style>
